<template>
  <div class="mobile-container">
    <el-timeline class="status-timeline">
      <!-- 动态生成物流状态时间轴 -->
      <el-timeline-item
          v-for="(status, index) in statusConfig"
          :key="index"
          :timestamp="status.label"
          placement="top"
          :type="status.type"
          class="status-item"
      >
        <div class="status-content">
          <!-- 包裹卡片 -->
          <div
              v-for="(item, idx) in filteredPackages(status.value)"
              :key="idx"
              class="package-card"
          >
            <el-descriptions
                size="small"
                :column="2"
                direction="vertical"
                class="mobile-descriptions"
            >
              <!-- 包裹图片 -->
              <el-descriptions-item>
                <el-image
                    class="package-image"
                    :src="item.thumbnail || defaultImage"
                    style="width: 100px;height: 100px;display: block"
                />
              </el-descriptions-item>

              <!-- 包裹信息 -->
              <el-descriptions-item>
                <div class="info-line">
                  <span class="label">快递单号：</span>
                  {{ item.trackingNumber }}
                </div>
                <div class="info-line">
                  <span class="label">名称：</span>
                  {{ item.packageName }}
                </div>
              </el-descriptions-item>

              <!-- 联系人信息 -->
              <el-descriptions-item :span="2">
                <div class="contact-info">
                  <div class="contact-line">
                    <el-icon><User /></el-icon>
                    寄件：{{ item.senderName }}
                  </div>
                  <div class="contact-line">
                    <el-icon><Message /></el-icon>
                    收件：{{ item.recipientName }}
                  </div>
                  <div v-if="item.state === '待签收'" class="contact-line">
                    <el-icon><Key /></el-icon>
                    取件码：{{ item.pickupCode }}
                  </div>
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </div>

          <!-- 空状态提示 -->
          <el-empty
              v-if="!filteredPackages(status.value).length"
              :description="`暂无${status.label}包裹`"
              :image-size="80"
              class="empty-tip"
          />
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup>
import { reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import request from "@/utils/request.js"

const defaultImage = 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'

const data = reactive({
  user: JSON.parse(localStorage.getItem('code_user') || "{}"),
  packageList: [],
  loading: true
})
// 物流状态配置
const statusConfig = [
  { label: '待签收', value: '待签收', type: 'danger' },
  { label: '待发货', value: '待发货', type: 'warning' },
  { label: '已发货', value: '已发货', type: 'primary' },
  { label: '已签收', value: '已签收', type: 'success' }
]

// 获取包裹数据
request.get('/package/selectPage', {
  params: {
    recipientName: JSON.parse(localStorage.getItem('code_user') || '{}').name,
    pageSize: 1000
  }
}).then(res => {
  if (res.code === '200') {
    data.packageList = res.data?.list || []
  } else {
    ElMessage.error(res.msg || '请求失败')
  }
}).finally(() => {
  data.loading = false
})

// 过滤包裹方法
const filteredPackages = computed(() => (status) => {
  return data.packageList.filter(item => item.state === status)
})
</script>

<style scoped>


/* 时间轴容器 */
.status-timeline {
  padding: 0 15px;
  margin-top: 10px;
}

/* 状态项标题 */
:deep (.el-timeline-item__timestamp) {
  font-size: 16px;
  font-weight: 500;
  color: var(--el-color-primary);
  padding: 8px 12px;
  background: rgba(44, 130, 255, 0.1);
  border-radius: 4px;
  margin-bottom: 15px;
  display: inline-block;
}

/* 包裹卡片 */
.package-card {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* 响应式布局 */
@media (max-width: 480px) {
  .package-image {
    width: 70px !important;
    height: 70px !important;
  }

  :deep (.el-descriptions__label) {
    font-size: 12px !important;
  }

  .info-line, .contact-line {
    font-size: 13px !important;
  }
}

/* 空状态提示 */
.empty-tip {
  padding: 20px 0;

  :deep (.el-empty__description) {
    color: #909399;
    font-size: 14px;
  }
}

/* 联系人信息样式 */
.contact-info {
  margin-top: 10px;

  .contact-line {
    display: flex;
    align-items: center;
    margin: 8px 0;

    .el-icon {
      margin-right: 6px;
      color: var(--el-color-primary);
    }
  }
}
</style>